<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span title="title1">角色列表</span>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="角色名称" prop="frolename" width="120" fixed>
        </el-table-column>
        <el-table-column label="角色类别" prop="froletype" width="120">
          <template slot-scope="scope">
            {{ roleType[scope.row.froletype] }}
          </template>
        </el-table-column>
        <el-table-column label="是否启用" prop="fstate" width="120">
          <template slot-scope="scope">
            {{ scope.row.fstate === '1' ? '已启用' : '停用' }}
          </template>
        </el-table-column>
        <el-table-column label="角色描述" prop="fremark" width="200">
        </el-table-column>

        <el-table-column label="创建时间" prop="fcreationdate" width="150">
        </el-table-column>
        <el-table-column label="创建人" prop="fcreateby" width="150">
        </el-table-column>
        <el-table-column label="最后修改人" prop="flastupdateby" width="150">
        </el-table-column>
        <el-table-column
          label="最后修改时间"
          prop="flastupdatedate"
          width="150"
        >
        </el-table-column>
        <el-table-column align="right" fixed="right" width="220">
          <template slot="header">
            操作
          </template>
          <template slot-scope="record">
            <a
              class="margin-a"
              href="javascript:;"
              style="margin-right: 5px;"
              @click="edit(record.row)"
              >修改</a
            >

            <a
              class="margin-a"
              href="javascript:;"
              style="margin-right: 5px;"
              @click="fStopOrStart(record.row)"
            >
              {{ record.row.fstate === '1' ? '停用' : '启用' }}
            </a>
            <a
              class="margin-a"
              href="javascript:;"
              style="margin-right: 5px;"
              @click="menupower(record.row)"
              >菜单授权</a
            >
            <a
              class="margin-a"
              href="javascript:;"
              style="margin-right: 5px;"
              @click="roleuser(record.row)"
              >角色成员</a
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentpage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagination.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </el-card>
    <zhlDialog
      title="角色编辑"
      ref="roleinfodialog"
      width="460px"
      class="my-dialog"
    >
      <roleinfo
        :datainfo="datainfo"
        @savedata="saveroledata"
        @close="$refs.roleinfodialog.visible = false"
      ></roleinfo>
    </zhlDialog>
    <zhlDialog
      title="角色成员"
      ref="rolememberdialog"
      width="960px"
      class="my-dialog"
    >
      <div class="formplane">
        <rolemember :selectRoleId="selectRoleId"></rolemember>
      </div>
    </zhlDialog>
    <zhlDialog
      title="角色菜单授权"
      ref="roleMenudialog"
      width="960px"
      class="my-dialog"
    >
      <roleMenu
        :roleID="selectRoleId"
        @confirm="$refs.roleMenudialog.visible = false"
        @close="$refs.roleMenudialog.visible = false"
      ></roleMenu>
    </zhlDialog>
  </div>
</template>
<script>
import { StopOrStart, QueryList } from '@/api/tappRole'
import roleinfo from './roleinfo.vue'
import rolemember from './rolemember.vue'
import roleMenu from './roleMenu.vue'
export default {
  data() {
    return {
      tableData: [],
      pagination: { pagesize: 5, total: 0, currentpage: 1 },
      roleType: ['普通角色', '公共角色', '管理员角色'],
      datainfo: {},
      selectRoleId: ''
    }
  },
  components: { roleinfo, rolemember, roleMenu },
  methods: {
    loadData(pagenum) {
      const param = {
        page: pagenum !== undefined ? pagenum : this.pagination.currentpage,
        rows: this.pagination.pagesize
      }
      QueryList(param).then(res => {
        this.tableData = res.data
        this.pagination.total = res.totalcount
      })
    },
    handleSizeChange(val) {
      this.pagination.pagesize = val
      this.loadData(1)
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.pagination.currentpage = val
      this.loadData(val)
    },
    fStopOrStart(rowitem) {
      const param = {
        id: rowitem.fid,
        status: rowitem.fstate === '1' ? '0' : '1'
      }
      StopOrStart(param).then(res => {
        this.loadData(1)
        this.$message.success(res.msg)
      })
    },

    edit(rowitem) {
      this.datainfo = rowitem
      this.$refs.roleinfodialog.visible = true
    },
    menupower(rowitem) {
      this.selectRoleId = rowitem.fid
      this.$refs.roleMenudialog.visible = true
    },
    roleuser(rowitem) {
      this.selectRoleId = rowitem.fid
      this.$refs.rolememberdialog.visible = true
    },
    saveroledata() {
      this.loadData(1)
      this.$refs.roleinfodialog.visible = false
    }
  },
  mounted() {
    this.loadData(1)
  }
}
</script>
<style scoped>
.formplane {
  padding: 15px;
}
</style>
